import React, { Component } from 'react'
import { Text, View, Image, StyleSheet, StatusBar, TouchableOpacity, Dimensions, Button, PanResponder, ScrollView, TouchableHighlight } from 'react-native'
import Swiper from 'react-native-swiper';
import { Drawer } from '@ant-design/react-native';


const more = require('../sources/Home/icons/more.png')
const search = require('../sources/Home/icons/search.png')
const listenMusic = require('../sources/Home/icons/listen_music.png')

const width = Dimensions.get('screen').width

const dataUrl = "http://120.53.227.202:8080/music/api/music/"

export default class Home extends Component {

    constructor(props) {
        super(props)
        this.state = {
            musics: [],
        }
    }
    componentDidMount() {
        // //获取整个⾳乐列表
        fetch(dataUrl).then(resp => resp.json())
            .then(data => this.setState({ musics: data.obj }))

    }

    render() {
        return (
            <View style={styles.shouye} >
                {/* 设置顶部手机的状态栏 */}
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={{ height: 95, backgroundColor: '#C3473A' }}>
                    <View style={{ height: 30 }} />
                    <View style={{ flex: 1, width: '100%', backgroundColor: '#C3473A', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingLeft: 20, paddingRight: 20 }}>
                        <TouchableOpacity onPress={() => this._openDrawer()}>
                            <View style={{ width: 20, height: 20 }}>
                                <Image source={more} style={{ width: 20, height: 20 }} />
                            </View>
                        </TouchableOpacity>
                        <View>
                            <View style={{ height: 35, width: width * 0.68, backgroundColor: 'rgba(242,246,252,0.1)', borderRadius: 50, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                                <View style={{ flexDirection: 'row' }}>
                                    <Image source={search} style={{ width: 20, height: 20, opacity: 0.4, marginRight: 5 }} />
                                    <Text style={{ color: 'rgba(255,255,255,0.5)' }}>听着情歌流眼泪</Text>
                                </View>
                            </View>

                        </View>

                        <View>
                            <Image source={listenMusic} style={{ width: 20, height: 20 }} />
                        </View>

                    </View>
                </View>
                <ScrollView stickyHeaderIndices={[2]}>
                    <View style={styles.Swiper}>
                        <Swiper style={styles.wrapper}
                            showsButtons={false}       //为false时不显示控制按钮
                            paginationStyle={{      //小圆点位置
                                bottom: 10
                            }}
                            loop={true}        //如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
                            autoplay={true}          //自动轮播
                            autoplayTimeout={2}      //每隔2秒切换
                            dot={<View style={{    //未选中
                                backgroundColor: '#D8D8D8',
                                width: 10,
                                height: 3,
                                marginLeft: 2
                            }} />}
                            activeDot={<View style={{  //选中
                                backgroundColor: '#FFFFFF',
                                width: 10,
                                height: 3,
                                marginLeft: 2
                            }} />}
                        >
                            <Image style={styles.image} source={require('../sources/Home/images/lrh.jpg')} resizeMode='cover' />
                            <Image style={styles.image} source={require('../sources/Home/images/cyx.jpg')} resizeMode='cover' />
                            <Image style={styles.image} source={require('../sources/Home/images/tfz.jpg')} resizeMode='cover' />
                        </Swiper>
                    </View>

                    {/* 图标 */}
                    <View style={styles.iconlist}>
                        <ScrollView
                            pagingEnabled={true}//是否分页，默认不分页，水平滑动时候会一下跳动很多页过去，加上true则一页一页滚动
                            horizontal={true}//水平滚动开启
                            showsHorizontalScrollIndicator={false}//是否显示滚动条

                        >
                            <View style={styles.icons}>
                                <View style={styles.iconbgd}>
                                    <Image style={styles.icon} source={require("../sources/Home/images/gd.png")} />
                                </View>
                                <Text style={styles.txt}>每日推荐</Text>
                            </View>
                            <View style={styles.icons}>
                                <View style={styles.iconbgd}>
                                    <Image style={styles.icon} source={require("../sources/Home/images/srfm.png")} />
                                </View>
                                <Text style={styles.txt}>私人FM</Text>
                            </View>
                            <View style={styles.icons}>
                                <View style={styles.iconbgd}>
                                    <Image style={styles.icon} source={require("../sources/Home/images/gs.png")} />
                                </View>
                                <Text style={styles.txt}>歌手</Text>
                            </View>
                            <View style={styles.icons}>
                                <View style={styles.iconbgd}>
                                    <Image style={styles.icon} source={require("../sources/Home/images/phb.png")} />
                                </View>
                                <Text style={styles.txt}>排行榜</Text>
                            </View>
                            <View style={styles.icons}>
                                <View style={styles.iconbgd}>
                                    <Image style={styles.icon} source={require("../sources/Home/images/zj.png")} />
                                </View>
                                <Text style={styles.txt}>专辑</Text>
                            </View>
                            <View style={styles.icons}>
                                <View style={styles.iconbgd}>
                                    <Image style={styles.icon} source={require("../sources/Home/images/zzmx.png")} />
                                </View>
                                <Text style={styles.txt}>专注冥想</Text>
                            </View>
                            <View style={styles.icons}>
                                <View style={styles.iconbgd}>
                                    <Image style={styles.icon} source={require("../sources/Home/images/zb.png")} />
                                </View>
                                <Text style={styles.txt}>直播</Text>
                            </View>
                            <View style={styles.icons}>
                                <View style={styles.iconbgd}>
                                    <Image style={styles.icon} source={require("../sources/Home/images/yx.png")} />
                                </View>
                                <Text style={styles.txt}>游戏专区</Text>
                            </View>
                        </ScrollView>
                    </View>

                    <View style={{ flex: 1, height: 40, backgroundColor: '#EEEEEE', borderTopWidth: 0.5, borderTopColor: '#E4E7ED', borderBottomColor: '#E4E7ED', borderBottomWidth: 0.5 }} >
                        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }} >
                            <View style={{ flex: 0.1, alignItems: 'center' }} >
                                <Image style={{ height: 17, width: 17 }} source={require('../sources/Like/music_img/music_play1.png')} />
                            </View>
                            <View style={{ flex: 0.7 }} >
                                <Text style={{ fontSize: 15, fontWeight: '700' }} >音乐列表</Text>
                            </View>
                        </View>
                    </View>

                    <View>
                        <ScrollView>
                            {this.state.musics.map((item, index) => {
                                return <View key={index} style={{ flexDirection: 'row', backgroundColor: '#EEEEEE' }} >
                                    <TouchableHighlight style={{ flex: 1 }}
                                        underlayColor='#DDDDDD'
                                        onPress={() => this._test(item)}>

                                        <View style={{ flex: 1, height: 58, flexDirection: 'row', alignItems: 'center' }} >
                                            <View style={{ flex: 0.15 }}>
                                                <Text style={{ textAlign: 'center', fontSize: 16, color: '#707070' }} >{item.id}</Text>
                                            </View>
                                            {/* 歌曲图片显示 */}
                                            {/* <View style={{ flex: 0.1 }} >
                                            <Image style={{ borderRadius: 30, height: 45, width: 45 }} source={{ uri: item.img }} />
                                        </View> */}
                                            <View style={{ flex: 0.63 }}>
                                                <View style={{ flex: 1, justifyContent: 'center' }} >
                                                    <View>
                                                        <Text style={{ fontSize: 16, width: 150, flexWrap: 'wrap' }} numberOfLines={1} >{item.name}</Text>
                                                    </View>
                                                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                        <Image style={{ height: 12, width: 12 }} source={require('../sources/Like/music_img/music_sq.png')} />
                                                        <Text style={{ color: '#707070', fontSize: 12, width: 150, marginLeft: 3, flexWrap: 'wrap' }} numberOfLines={1} >{item.singer}</Text>
                                                    </View>
                                                </View>
                                            </View>
                                            <View style={{ flex: 0.17 }} >
                                                <TouchableHighlight style={{ flex: 1, justifyContent: 'space-around', alignItems: 'center' }}
                                                    underlayColor="#DDDDDD"
                                                    onPress={() => this._test(item)}>
                                                    <Image style={{ height: 23, width: 23 }} source={require('../sources/Like/music_img/music_mvplay.png')} />
                                                </TouchableHighlight>
                                            </View>
                                            <View style={{ flex: 0.1 }} >
                                                <TouchableHighlight style={{ flex: 1, justifyContent: 'space-around' }}
                                                    underlayColor="#DDDDDD"
                                                    onPress={() => this._test(item)} >
                                                    <Image style={{ height: 20, width: 20 }} source={require('../sources/Like/music_img/music_singmore.png')} />
                                                </TouchableHighlight>
                                            </View>
                                        </View>
                                    </TouchableHighlight>
                                </View>
                            })}


                        </ScrollView>
                    </View>
                </ScrollView>

            </View>
        )
    }
    _openDrawer() {
        // this.props._openDrawer
        this.props._openDrawer()
    }
    //测试touchablehighlight
    _test = (item) => {
        this.props.navigation.navigate('Music', item)
    }

}


var styles = StyleSheet.create({
    shouye: {
        flex: 1,
    },
    Swiper: {
        height: 150,
        padding: 10
    },
    image: {
        flex: 1,
        width: '100%',
        borderRadius: 10
    },
    iconlist: {
        flexDirection: 'row',
    },
    icons: {
        width: 70,
        height: 70,
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 15
    },
    iconbgd: {
        width: 30,
        height: 30,
        backgroundColor: '#FEF2EF',
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    icon: {
        width: 20,
        height: 20,
    },
    txt: {
        fontSize: 12,
        color: '#6F6F6F',
        marginTop: 4,
    },
    fjx: {
        height: 1,
        backgroundColor: '#E6E6E6',
        marginTop: 15
    },
    tit: {
        fontSize: 19,
        fontWeight: '700'
    },
    move: {
        flexDirection: 'row',
        marginLeft: 255,
        marginTop: 5,
        width: 55,
        height: 23,
        borderWidth: 1,
        borderRadius: 20,
        borderColor: '#888888',
        justifyContent: 'center',
        alignItems: 'center'
    },
    img: {
        width: 14,
        height: 14
    },
    zjfm: {
        width: 70,
        height: 70,
        borderRadius: 20
    },
    singInfo: {
        marginLeft: 14,
        marginTop: 12,
        flexDirection: 'row',
        alignItems: 'center'
    },
    singname: {
        fontSize: 20
    },
    singauthor: {
        fontSize: 15,
        color: '#888888',
        marginTop: 2
    },
    test: {
        marginTop: 50
    }
});